<template>
    <div class="container">
        <p class="oneP">小程序推广的关键</p>
        <p class="twoP">多元化渠道推广，实现高效传播，发挥数字营销最大价值。</p>
        <button class="oneButton" @click="$router.push({path:'/regist'})">立即注册</button>
        <ul class="ul1">
            <li v-for="(item,index) in arr1" :key="index"  @mouseover="show(index)">
                <div :class="{bg:index==liIndex,nobg:index!=liIndex}">
                    <img :src="item[0]" :class="{opa:liIndex==index}">
                    <img :src="item[1]" style="z-index:1">
                    <div :class="{initialmask: index!==liIndex}"></div>
                </div>
                <div :class="{border:index==liIndex}">
                    <img src="../../assets/img/1微信小程序/切图/9.png">
                    <p>{{item[2]}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>
<script>
require("../../assets/css/p.css")
const img1 = require("../../assets/img/1微信小程序/切图/7.png")
const img2 = require("../../assets/img/1微信小程序/切图/11.png")
const img3 = require("../../assets/img/1微信小程序/切图/13.png")
const img4 = require("../../assets/img/1微信小程序/切图/8.png")
const img5 = require("../../assets/img/1微信小程序/切图/12.png")
const img6 = require("../../assets/img/1微信小程序/切图/14.png")
export default {
    data(){
        return {
            arr1:[
                [img1,img4,"提升小程序的用户触达率"],
                [img2,img5,"精准触达小程序的目标用户"],
                [img3,img6,"提升小程序的用户粘性"]
            ],
            liIndex:0,
        }
    },
    methods:{
        show(index){
            this.liIndex = index;

        }
    }
}
</script>
<style scoped>
.container{
    width:1200px;
    margin: 0 auto;
    margin-top: 80px;
    overflow: hidden;
    text-align: center;
}
.ul1{
    overflow: hidden;
    margin-top: 60px;
    height:310px;
    position: relative;
    
}
.ul1>li{
    width:360px;
    height: 300px;
    margin-left:60px;
    text-align: center;
    float: left;
    position: relative;
    box-shadow:2px 2px 20px #EBEBEB;
}
.ul1>li:first-child{
    margin-left: 0;
}
.ul1>li>div:nth-child(1){
    height: 220px;
}
.ul1>li>div:nth-child(2){
    height: 80px;
}
.ul1>li>div:nth-child(1)>img:nth-child(2){
    position: absolute;
    top:80px;
    left: 150px;
}
.ul1>li:nth-child(1)>div:nth-child(1)>img:nth-child(2){
    left: 144px;
}
.ul1>li>div:nth-child(2)>img:nth-child(1){
    margin-top: 20px;
}
.ul1>li>div:nth-child(2)>p:nth-child(2){
    margin-top: 24px;
    font-size: 16px;
    color:rgb(34, 34, 34);
}
.bg{
    background: url("../../assets/img/1微信小程序/切图/10.png");
}
.border{
    border:1px solid red;
    border-top: none;
}
.opa{
    opacity:0.2;
}
.oneButton {
    box-shadow: 0px 4px 19px #ed9191;
}
.initialmask {
    display:block;
    position: absolute;
    background-color: #000;
    opacity: 0.6;
    left: 0;
    top: 0;
    right: 0;
    bottom: 80px;
}
</style>


